<template>
  <el-dialog
    :visible.sync="kindDialogVisible"
    :before-close="handleClose"
    :append-to-body="false"
    :show-close="true"
    class="order-kind-dialog medium-common-dialog-size">
    <div class="flex" style="margin-bottom:10px;">
      <Title title="订单分类管理"/>
      <PlainCreateBtn v-if="hasRouteAuth('system:kind:add')" @click="addKind">添加</PlainCreateBtn>
    </div>
    <el-table
      v-loading="listloading"
      :data="kindListData.items"
      :max-height="maxHeight"
      class="fb-table"
      element-loading-text="加载中..."
      empty-text="暂无数据"
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <el-table-column align="left" label="订单分类">
        <template slot-scope="scope">
          <div v-if="scope.row.orderKindName">{{ scope.row.orderKindName }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column align="left" label="操作" width="100">
        <template slot-scope="scope">
          <el-button v-if="hasRouteAuth('system:kind:edit')" type="text" @click="toEdit(scope)"><span style="font-size:14px;">编辑</span></el-button>
          <el-button v-if="hasRouteAuth('system:kind:del')" type="text" @click="deleteItem(scope)"><span style="font-size:14px;">删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display:flex;justify-content:flex-end;margin-top:20px;">
      <el-pagination
        :current-page="page"
        :page-size="perPage"
        :total="kindListData.total"
        :page-sizes="[20, 50, 100, 250, 500]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { getOrderKindList, orderKindDel } from '@/api/config';
import { hasRouteAuth } from '@/utils/permission';
import setting from '@/assets/setting.png';
export default {
  components: { Title },
  data() {
    return {
      setting,
      kindDialogVisible: false,
      kindListData: {},
      page: 1,
      perPage: 20,
      listloading: false,
      maxHeight: ''
    };
  },
  methods: {
    hasRouteAuth,
    handleClose() {
      this.kindDialogVisible = false;
    },
    getkindList(reset = false) {
      if (reset) this.page = 1;
      this.listloading = true;
      getOrderKindList({ page: this.page, perPage: this.perPage }).then(res => {
        this.listloading = false;
        if (res.code === 200) {
          this.kindListData = res.data;
        } else {
          this.$message.error(res.message);
        }
      }).catch(() => {
        this.listloading = false;
      });
    },
    addKind() {
      this.$emit('addOrderKind');
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getkindList(true);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getkindList();
    },
    toEdit(scope) {
      this.$emit('orderKindEdit', scope);
    },
    deleteItem(scope) {
      this.$confirm('请确认是否删除', '', {
        confirmButtonText: '确定',
        type: 'warning',
        showClose: false,
        center: true,
        dangerouslyUseHTMLString: true,
        iconClass: 'charge-icon',
        customClass: 'del-message del-message-cancel'
      }).then(() => {
        orderKindDel(scope.row.id).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功');
            this.getkindList();
          } else if (res.code === 501) {
            this.$confirm('<div>该订单分类存在被引用订单，<br />请修改订单的分类后再删除</div>', '', {
              confirmButtonText: '确定',
              showCancelButton: false,
              type: 'warning',
              showClose: false,
              center: true,
              dangerouslyUseHTMLString: true,
              iconClass: 'charge-icon',
              customClass: 'del-message'
            });
          }
        }).catch(err => {
          console.error(err);
        });
      });
    }
  }
};
</script>
<style lang="scss" scoped>

.order-kind-dialog {
  &::v-deep {
    .el-dialog {
      width: 800px !important;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
}
</style>
